<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG and HTML</title>
    <style>
        svg {
            stroke: black;
            fill:white;
        }
        g.selected rect {
            fill:#ffc;
        }
        text {
            stroke:none;
            fill:black;
            text-anchor:middle;
        }
        line.slider {
            stroke:gray;
            stroke-width: 2;
        }
        label {
            display: block;
        }
        h1 {
            font-size: 125%;
        }
    </style>
</head>
<body>
    <svg width="400" height="250" viewBox="0 0 400 250" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
        <g id="shirt" transform="translate(100, 100)">
            <path id="shirt-outline" d="M -6 -30, -32 -19, -25.5 -13, -22 -14, -22 30, 23 30, 23 -14, 26.5 -13, 33 -19, 7 -30 A 6.5 6 0 0 1 -6 -30Z" />
        </g>

        <g id="scale0">
            <rect x="100" y="10" width="30" height="30" />
            <text x="115" y="30">
                S
            </text>
        </g>

        <g id="scale1" class="selected">
            <rect x="140" y="10" width="30" height="30" />
            <text x="155" y="30">
                M
            </text>
        </g>

        <g id="scale2">
            <rect x="180" y="10" width="30" height="30" />
            <text x="195" y="30">
                L
            </text>
        </g>

        <g id="sliderGroup0" transform="translate(230, 10)">
            <rect x="-10" y="-5" width="40" height="110" />
            <rect x="5" y="0" width="10" height="100" style="fill:red;" />
            <line id="slide0" class="slider" x1="0" y1="0" x2="20" y2="0" />
        </g>

        <g id="sliderGroup1" transform="translate(280, 10)">
            <rect x="-10" y="-5" width="40" height="110" />
            <rect x="5" y="0" width="10" height="100" style="fill:green;" />
            <line id="slide1" class="slider" x1="0" y1="0" x2="20" y2="0" />
        </g>

        <g id="sliderGroup2" transform="translate(330, 10)">
            <rect x="-10" y="-5" width="40" height="110" />
            <rect x="5" y="0" width="10" height="100" style="fill:blue;" />
            <line id="slide2" class="slider" x1="0" y1="0" x2="20" y2="0" />
        </g>
    </svg>

    <div style="text-align:center">
        <form action="" id="rgbForm">
            <label for="fld0">Red:<input id="fld0" type="text" size="5" value="100" /></label>
            <label for="fld1">Green:<input id="fld1" type="text" size="5" value="100" /></label>
            <label for="fld2">Blur:<input id="fld2" type="text" size="5" value="100" /></label>
            <label for="nRings">Rings:<input type="text" size="3" value="0" id="nRings"></label>
        </form>
    </div>

<script src="./shirt_interact.js"></script>
</body>
</html>